<template>
    <div id="home-footer">
        <div class="store-goods-list">
            <ul class="store-bottom">
                <li>
                    <router-link to="/store/mall/home" :class="[footerType == 'mallHome' ? 'store-bottom-active': '']">
                        <img v-if="footerType == 'mallHome'" src="../../../assets/images/icon_shangcheng_xuanzhong_nor@3x.png"/>
                        <img v-else v-lazy="staticImageUrl('images/icon_shangcheng_nor@3x.png')"/>
                        <p>商城</p>
                    </router-link>
                </li>
                <li>
                    <span @click="toIm()">
                        <img src="../../../assets/images/icon_kefu_nor@3x.png"/>
                        <p>客服</p>
                    </span>
                </li>
                <li>
                    <a href="/to/account" :class="[footerType== 'account' ? 'store-bottom-active': '']">
                        <img v-if="footerType== 'account'" src="../../../assets/images/icon_wode_xuanzhong_nor@3x.png"/>
                        <img v-else v-lazy="staticImageUrl('images/icon_wode_nor@3x.png')"/>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "HomeFooter",
        props:{footerType:{type:String}},
        methods:{
            toIm(){
                this.$router.push({path:'/im/chat/to/store/customer'});
            }
        }
    }
</script>

<style scoped>
    .store-bottom {
        background: #fff;
        width: 100%;
        height: 50px;
        display: flex;
        text-align: center;
        margin-bottom: 0 !important;
        z-index: 1060;
        box-shadow: 0px -2px 2px #e1e1e1; }

    .store-bottom li {
        flex: 1;
        float: left;
        width: 33.3333333333%; }

    .store-bottom p {
        margin: 6px 0 2px 0;
        font-size: 10px;
        color: #999999; }

    .store-bottom img {
        margin-top: 6px;
        height: 20px;
        width: 20px; }

    .store-change-img {
        padding: 10px;
        background: #fff; }

    .store-change-img .item {
        width: 100%; }

    .store-bottom-active {
        color: #000; }

    .store-bottom {
        position: fixed;
        bottom: 0; }
</style>
